<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>：jQuery省市区三级联动插件city-picker</title>

    <!--必要样式-->
    <link href="css/city-picker.css" rel="stylesheet" type="text/css"/>
    <link href="css/area-picker.css" rel="stylesheet" type="text/css"/>


</head>
<body>

<!-- Content -->
<div class="container">

    <h2 class="page-header">演示</h2>

    <form>
        <div style="position: relative;">
            <input id="area-picker" class="form-control" readonly type="text" data-toggle="area-picker">

            <span class="area-picker-span">
                <span class="placeholder">请选择省/市/区</span>
                <span class="title"></span>
                <span class="arrow"></span>
            </span>

            <div class="area-picker-dropdown">
                <div class="area-select-wrap">
                    <div class="area-select-tab">
                        <a data-count="province">省</a><a data-count="city">市</a><a data-count="district">区县</a>
                    </div>
                    <div class="area-select-content">
                        <div class="area-select province"></div>
                        <div class="area-select city"></div>
                        <div class="area-select district"></div>
                    </div>
                </div>
            </div>
        </div>
    </form>

</div>

<script src="js/jquery.js"></script>
<!--<script src="js/area-picker.data.js"></script>-->
<script>
    var areas = [{"id":23,"isUse":1,"level":1,"name":"四川省","parentId":0,"sort":0},{"id":2419,"isUse":1,"level":3,"name":"锦江区","parentId":269,"sort":0},{"id":2420,"isUse":1,"level":3,"name":"青羊区","parentId":269,"sort":0},{"id":2421,"isUse":1,"level":3,"name":"金牛区","parentId":269,"sort":0},{"id":2422,"isUse":1,"level":3,"name":"武侯区","parentId":269,"sort":0},{"id":2423,"isUse":1,"level":3,"name":"成华区","parentId":269,"sort":0},{"id":2427,"isUse":1,"level":3,"name":"温江区","parentId":269,"sort":0},{"id":2428,"isUse":1,"level":3,"name":"金堂县","parentId":269,"sort":0},{"id":2429,"isUse":1,"level":3,"name":"双流县","parentId":269,"sort":0},{"id":2430,"isUse":1,"level":3,"name":"郫县","parentId":269,"sort":0},{"id":2431,"isUse":1,"level":3,"name":"大邑县","parentId":269,"sort":0},{"id":2432,"isUse":1,"level":3,"name":"蒲江县","parentId":269,"sort":0},{"id":2433,"isUse":1,"level":3,"name":"新津县","parentId":269,"sort":0},{"id":2434,"isUse":1,"level":3,"name":"都江堰市","parentId":269,"sort":0},{"id":2435,"isUse":1,"level":3,"name":"彭州市","parentId":269,"sort":0},{"id":2436,"isUse":1,"level":3,"name":"邛崃市","parentId":269,"sort":0},{"id":2437,"isUse":1,"level":3,"name":"崇州市","parentId":269,"sort":0},{"id":3242,"isUse":1,"level":3,"name":"高新区","parentId":269,"sort":0},{"id":269,"isUse":1,"level":2,"name":"成都市","parentId":23,"sort":610000}];

    var showProvince = function(){
        show();
        $('.area-select').hide();
        $('.province').empty().show();
        $('.area-select-tab a').removeClass('active');
        $('.area-select-tab a:first').addClass('active');
        $.each(areas,function(i,n){
            if(n.level==1){
                $('<a href="#" data-id="'+ n.id+'">'+ n.name+'</a>').appendTo('.province').bind('click',function(){
                    $('.area-picker-span>.placeholder').append('<span class="select-item" data-count="province" data-code="'+selectId+'">'+name+'</span>');
                    showCity();
                });
            }
        });
    };
    var showCity = function(){
        $('.area-select').hide();
        $('.area-select-tab a').removeClass('active');
        $('.area-select-tab a').eq(1).addClass('active');
        $('.city,.district').empty();
        $('.city').show();
        var selectId = $(this).attr('data-id');
        var name = $(this).text();
        $.each(areas,function(i,n){
            if(n.parentId==selectId){
                $('<a href="#" data-id="'+ n.id+'">'+ n.name+'</a>').appendTo('.city').bind('click',showDistrict);
            }
        });
    };
    var showDistrict = function(){
        $('.area-select').hide();
        $('.district').empty().show();
        $('.area-select-tab a').removeClass('active');
        $('.area-select-tab a').eq(2).addClass('active');
        var selectId = $(this).attr('data-id');
        var name = $(this).text();
        $.each(areas,function(i,n){
            if(n.parentId==selectId){
                $('<a href="#" data-id="'+ n.id+'">'+ n.name+'</a>').appendTo('.district').bind('click',completeSelect);
            }
        });
        $('.area-picker-span>.placeholder').append('<span class="select-item" data-count="city" data-code="'+selectId+'">'+name+'</span>');
    };
    var completeSelect = function(){
        $('.area-select').hide();
        $('.area-select-tab a').removeClass('active');
        var selectId = $(this).attr('data-id');
        var name = $(this).text();
        $('.area-picker-span>.placeholder').append('<span class="select-item" data-count="district" data-code="'+selectId+'">'+name+'</span>');
        hide();
        console.info(selectId);
        console.info(name);
    };
    var show = function () {
        $('.area-picker-dropdown').css({'left': '0px','top': '100%', 'width': '100%', 'display': 'block'});
    };
    var hide = function () {
        $('.area-picker-dropdown').removeAttr('style');
    };
    $('.area-select-tab a').click(function(){
        if($(this).is('[data-count="province"]')){
            showProvince();
        }
        if($(this).is('[data-count="city"]')){
            showCity();
        }
        if($(this).is('[data-count="district"]')){
            showDistrict();
        }
    });

    $('#area-picker').click(showProvince);
</script>
</body>
</html>
